<!DOCTYPE html>
<html lang="en">
<head>
	
	<!-- start: Meta -->
	<meta charset="utf-8" />
	<title>SimpliQ - Flat & Responsive Bootstrap Admin Template</title>
	<meta name="description" content="SimpliQ - Flat & Responsive Bootstrap Admin Template." />
	<meta name="author" content="Łukasz Holeczek" />
	<meta name="keyword" content="SimpliQ, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina" />
	<!-- end: Meta -->
	
	<!-- start: Mobile Specific -->
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- end: Mobile Specific -->
	
	<!-- start: CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
	<link href="css/style.min.css" rel="stylesheet" />
	<link href="css/style-responsive.min.css" rel="stylesheet" />
	<link href="css/retina.css" rel="stylesheet" />
	<!-- end: CSS -->
	

	<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	  	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<link id="ie-style" href="css/ie.css" rel="stylesheet">
	<![endif]-->
	
	<!--[if IE 9]>
		<link id="ie9style" href="css/ie9.css" rel="stylesheet">
	<![endif]-->
	
	<!-- start: Favicon and Touch Icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
	<link rel="shortcut icon" href="ico/favicon.png" />
	<!-- end: Favicon and Touch Icons -->	
		
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
		<!-- start: Header -->
	<div class="navbar">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a id="main-menu-toggle" class="hidden-phone open"><i class="icon-reorder"></i></a>		
				<div class="row-fluid">
				<a class="brand span2" href="index.html"><span>SimpliQ</span></a>
				</div>		
			</div>
		</div>
	</div>
	<!-- start: Header -->
	
		<div class="container-fluid-full">
		<div class="row-fluid">
				
			<!-- start: Main Menu -->
			<div id="sidebar-left" class="span2">
				
				<!-- <div class="row-fluid actions">
													
					<input type="text" class="search span12" placeholder="..." />
				
				</div> -->	
				
				<div class="nav-collapse sidebar-nav">
					<ul class="nav nav-tabs nav-stacked main-menu">
                        <li><a href="table.html"><i class="icon-align-justify"></i><span class="hidden-tablet">用户列表</span></a></li>
						<li><a href="form.html"><i class="icon-edit"></i><span class="hidden-tablet"> 添加一个新用户</span></a></li>
						
						<li><a href="file-manager.html"><i class="icon-folder-open"></i><span class="hidden-tablet">导入多个用户</span></a></li>
						<li><a href="login.html"><i class="icon-lock"></i><span class="hidden-tablet">注销</span></a></li>
					</ul>
				</div>
			</div>
			<!-- end: Main Menu -->
						
			<!-- start: Content -->
			<div id="content" class="span10">
			
			
			<div class="row-fluid">		
				<div class="box span12">
					<!-- <div class="box-header" data-original-title="">
						<h2><i class="icon-user"></i><span class="break"></span>Members</h2>
						<div class="box-icon">
							<a href="#" class="btn-setting"><i class="icon-wrench"></i></a>
							<a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
							<a href="#" class="btn-close"><i class="icon-remove"></i></a>
						</div>
					</div> -->
					<div class="box-content"  id="user-list-div">
						<table class="table table-striped table-bordered bootstrap-datatable ">
						  <thead>
							  <tr>
								  <th>用户名</th>
								  <th>真实姓名</th>
								  <th>简介</th>
								  <th>加入时间</th>
								  <th>身份</th>
                                  <th>加入方式</th>
                                  <th>操作</th>
							  </tr>
						  </thead>   
						  <tbody>
                            <tr v-for="user in users">
                                <td class="center">{{user.username}}</td>
                                <td class="center">{{user.name}}</td>
                                <td class="center">{{user.intro}}</td>
                                <td class="center">{{new Date(user.joinTime).format("yyyy-MM-dd hh:mm:ss")}}</td>
                                <td class="center">
                                    <span v-if="user.identify==2" class="label label-important">限制登录用户</span>
                                    <span v-else  class="label label-success"> 
                                        {{user.identify==0?'普通用户':'管理员'}}
                                    </span>
                                </td>
                                <td class="center">{{user.joinMet==1?'管理员添加':'自行注册'}}</td>
                                <td class="center">
                                    <!-- <button>限制用户登录</button> -->
                                    <a class="btn btn-info" v-if="user.identify == 0" @click="updateStatus(user,2)">
                                        <i class="icon-ban-circle "></i>  
                                    </a>
                                    <a v-if="user.identify == 2" @click="updateStatus(user,0)" class="btn btn-success" href="#">
                                        <i class="icon-reply "></i>  
                                    </a>
                                    <a v-if="user.identify != 1" @click="updateStatus(user,1)" class="btn btn-danger" href="#">
                                        <i class="icon-trash "></i> 
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align:center" colspan="7" v-if="users.length > 0"><button style="width: 80%;" class="btn btn-primary" @click="more">加载更多</button></td>
                            </tr>
						  </tbody>
					  </table>            
					</div>
				</div><!--/span-->
			
			</div><!--/row-->

			
    
					
			</div>
			<!-- end: Content -->
				
				</div><!--/fluid-row-->
				
		<!-- <div class="modal hide fade" id="myModal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h3>Settings</h3>
			</div>
			<div class="modal-body">
				<p>Here settings can be configured...</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Close</a>
				<a href="#" class="btn btn-primary">Save changes</a>
			</div>
		</div>
		 -->
		<div class="clearfix"></div>
		
		<footer>
			<p>
				<span style="text-align:left;float:left">Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
			</p>

		</footer>
				
	</div><!--/.fluid-container-->

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/GLOBAL.js"></script>
    <script src="js/timeUtil.js"></script>
    <script src="js/req.js"></script>
    <script type="text/javascript">
        var list = new Vue({
            el : '#user-list-div',
            data : {
                users : []
            },
            methods : {
                more : function(){
                    var lastUsername = this.users[this.users.length - 1].username;
                    var data = {'lastUsername':lastUsername,'length':10}
                    getData(PRE_URL + 'user/moreUsers',data,function(res){
                        if(res.code != 0){
                            alert(res.message);
                            return;
                        }
                        if(res.object.length > 0)
                            list.users = list.users.concat(res.object);
                    });
                },
                updateStatus : function(user,status){
                    if(!confirm('您确定要执行该操作吗？')){
                        return;
                    }
                    var data = {'username':user.username,'status':status};
                    postData(PRE_URL + '/user/updateStatus',data,function(res){
                        if(status == 1){
                            for(var i=0;i<list.users.length;i++){
                                if(list.users[i].username == user.username){
                                    list.users.splice(i,1);
                                }
                            }
                        }else{
                            user.identify = status;
                        }
                    });
                    
                    
                    // console.log(data);
                }
            },
            created : function(){
                var data = {'lastUsername':'','length':10};
                getData('http://' + URL + ':' + PORT + PRO_NAME + 'user/moreUsers',data,function(res){
                    if(res.code != 0){
                        alert(res.message);
                        return;
                    }
                    list.users = res.object;
                });
            }
        });

    </script>


	<!-- start: JavaScript-->
		<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery-migrate-1.2.1.min.js"></script>	
		<script src="js/jquery-ui-1.10.3.custom.min.js"></script>	
		<script src="js/jquery.ui.touch-punch.js"></script>	
		<script src="js/modernizr.js"></script>	
		<script src="js/bootstrap.min.js"></script>	
		<script src="js/jquery.cookie.js"></script>	
		<script src='js/fullcalendar.min.js'></script>	
		<script src='js/jquery.dataTables.min.js'></script>
		<script src="js/excanvas.js"></script>
	<script src="js/jquery.flot.js"></script>
	<script src="js/jquery.flot.pie.js"></script>
	<script src="js/jquery.flot.stack.js"></script>
	<script src="js/jquery.flot.resize.min.js"></script>
	<script src="js/jquery.flot.time.js"></script>
		
		<script src="js/jquery.chosen.min.js"></script>	
		<script src="js/jquery.uniform.min.js"></script>		
		<script src="js/jquery.cleditor.min.js"></script>	
		<script src="js/jquery.noty.js"></script>	
		<script src="js/jquery.elfinder.min.js"></script>	
		<script src="js/jquery.raty.min.js"></script>	
		<script src="js/jquery.iphone.toggle.js"></script>	
		<script src="js/jquery.uploadify-3.1.min.js"></script>	
		<script src="js/jquery.gritter.min.js"></script>	
		<script src="js/jquery.imagesloaded.js"></script>	
		<script src="js/jquery.masonry.min.js"></script>	
		<script src="js/jquery.knob.modified.js"></script>	
		<script src="js/jquery.sparkline.min.js"></script>	
		<script src="js/counter.min.js"></script>	
		<script src="js/raphael.2.1.0.min.js"></script>
	<script src="js/justgage.1.0.1.min.js"></script>	
		<script src="js/jquery.autosize.min.js"></script>	
		<script src="js/retina.js"></script>
		<script src="js/jquery.placeholder.min.js"></script>
		<script src="js/wizard.min.js"></script>
		<script src="js/core.min.js"></script>	
		<script src="js/charts.min.js"></script>	
		<script src="js/custom.min.js"></script>
	<!-- end: JavaScript-->
	
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>